<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            border: 0;
        }

        div {
            position: absolute;
            width: 200px;
            height: 150px;
            background-color: red;
            border-radius: 5%;

        }
    </style>
</head>


<body>
    <div>
        移动到最右边 变小消失
    </div>
</body>
<script>
    'use strict';
    // function timeOut(time) {
    //     return new Promise(resolve => setTimeout(resolve, time));
    // }

    function img(url) {
        return new Promise((resolve, reject) => {
            let Img = new Image();
            Img.src = url;
            Img.onload = () => {
                resolve(Img);
            };
            Img.onerror = reject;
            document.body.appendChild(Img);
        });
    }
    img('./imgs/1.jpg').then(image => {
        image.style.border = '10px solid red';
    }).catch(v => { });

    // function promiseTest(number) {
    //     return new Promise((resolve, reject) => {
    //         number == true ? resolve(number) : reject(number);
    //     });
    // }

    // promiseTest(false).then(vlaue => {
    //     timeOut(1000).then(v => console.log(vlaue + '：正确'));
    // }).catch(vlaue => { timeOut(1000).then(v => console.log(vlaue + '：错误')); });
    //定义setInterval
    function interval(time, callback) {
        return new Promise(resolve => {
            let id = setInterval(() => {
                callback(id, resolve);//需要设置回调函数才能把里面的值拿出来
                // resolve();//不能在后面进行回调
            }, time);
        });
    }
    function animations(el) {
        let left = (window.getComputedStyle(el).left).slice(0, -2) * 1;
        interval(10, (id, resolve) => {
            if (left > 600) {
                clearInterval(id);
                resolve(el);
            }
            el.style.left = (++left) + 'px';
        }).then(el => {
            let width = (window.getComputedStyle(el).width).slice(0, -2) * 1;
            let height = (window.getComputedStyle(el).height).slice(0, -2) * 1;
            let num = 1;
            interval(10, (id, resolve) => {
                if (width <= 100) {
                    clearInterval(id);
                    // el.style.display = 'none';
                }
                el.style.width = (--width) + 'px';
                el.style.height = (--height) + 'px';
                el.style.opacity = `${num -= 0.005}`;
            });
        });
    }
    animations(document.querySelector('div'))
</script>

</html>